<script setup lang="ts">

import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue'

const count = ref(0)
const title = ref('hello world')

const font = reactive({
  color: 'red',
  fontSize: 30
})
const zIndex = ref(99)
const rotate = ref(-30)




watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
  console.log(newValue, oldValue)
})

const doubleCount = computed(() => {
  console.log('computed')
  return count.value * 2
})
onMounted(()=>{
  console.log('mounted')
  title.value = 'hello vue'
})
onUpdated(()=>{
  console.log('updated')
})
onUnmounted(()=>{
  console.log('unmounted')
})
</script>

<template>
  <el-watermark :font="font" :content="'vue'" :z-index="zIndex" :rotate="rotate">
    <div>
      <h3>{{title}}</h3>
      <button @click="count++">点击这个按钮+</button>
      <span>{{count}}个苹果</span><br/>
      <span>双倍{{doubleCount}}个苹果</span>
    </div>
  </el-watermark>

</template>

<style scoped>

</style>
